<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 VUI(https://git.oschina.net/durcframework/vui) All rights reserved.
 */

;(function(){

<span id=''>/**
</span> * @ignore
 * @class
 */
VUI.Class('CalendarView',{
<span id='global-method-init'>	/**
</span>	 * 构造函数
	 * @ignore
	 */
	init:function(cmp) {
		this._super(cmp);
		
		this.showFoot = this.opt('showFoot');
		// 今天
		this.today = new Date();
		this.date = new Date();
		
		this.year = this.getYear();
		this.month = this.getMonth();
		
		this.months = this.buildMonths();
		this.weekTextItems = VUI.Config.DatePick.weekTextItems;
		
		this.initMonthDays();
	}
	,getYears:function() {
		if(!this.yearItems) {
			this.yearItems = [];
			var currentYear = this.getYear();
			for(var i=-10;i&lt;=10;i++) {
				var year = currentYear + i;
				this.yearItems.push(year);
			}
		}
		return this.yearItems;
	}
<span id='global-method-getMonth'>	/**
</span>	 * 获取月
	 * @ignore
	 */
	,getMonth:function() {
		return this.date.getMonth() + 1;
	}
<span id='global-method-getDate'>	/**
</span>	 * 获取日
	 * @ignore
	 */
	,getDate:function() {
		return this.date.getDate();
	}
	,buildMonths:function() {
		var items = [];
		for(var i=1;i&lt;=12; i++) {
			items.push(i);
		}
		return items;
	}
<span id='global-method-getYear'>	/**
</span>	 * 获取年
	 * @ignore
	 */
	,getYear:function() {
		return this.date.getFullYear();
	}
<span id='global-method-setYear'>	/**
</span>	 * 设置年
	 * @ignore
	 * @param year 年份,int型
	 */
	,setYear:function(year) {
		this.date.setYear(year);
	}
<span id='global-method-setMonth'>	/**
</span>	 * 设置月
	 * @ignore
	 * @param month 月份1~12,int型
	 */
	,setMonth:function(month) {
		this.date.setMonth(month - 1);
	}
<span id='global-method-setDate'>	/**
</span>	 * 设置天
	 * @ignore
	 * @param date 天,int型
	 */
	,setDate:function(date) {
		this.date.setDate(date);
	}
	,ngChangeYear:function(){
		this.setYear(this.year);
		this.initMonthDays();
	}
	,vChangeMonth:function(){
		this.setMonth(this.month);
		this.initMonthDays();
	}
	,preMonth:function() {
		if(this.month == 1) {
			this.year--;
			this.month = 12;
		}else{
			this.month--;
		}
		this.initMonthDays();
	}
	,nextMonth:function() {
		if(this.month == 12) {
			this.year++;
			this.month = 1;
		}else{
			this.month++;
		}
		this.initMonthDays();
	}
<span id='global-method-setValue'>	/**
</span>	 * 设置时间
	 * @ignore
	 * @param dateStr 字符串日期
	 */
	,setValue:function(dateStr) {
		var date;
		if(dateStr) {
			date = VUI.Date.parse(dateStr);
		}else{
			date = new Date();
		}
		this.date = date;
	}
	,isSelected:function(dayData) {
		var year = this.getYear();
		var month = this.getMonth();
		var date = this.getDate();
		return year == dayData.y &amp;&amp; month == dayData.m &amp;&amp; date == dayData.d;
	}
	,vClick:function(dayData) {
		this.setYear(dayData.y);
		this.setMonth(dayData.m);
		this.setDate(dayData.d);
		
		this.cmp.fire('Click',dayData);
		
		this.cmp.runOptFun('clickHandler',dayData);
		
		this.initMonthDays();
	}
	,showCalendar:function(date) {
		this.setValue(date);
		this.initMonthDays();
		this.show();
	}
	,visiable:function() {
		return this.getWraper().is(':visible');
	}
	,vClickToday:function() {
		var dayData = this.getTodayData();
		
		this.vClick(dayData);
	}
	,vClickCancel:function() {
		var dayData = this.getTodayData();
		this.cmp.runOptFun('cancelHandler',dayData);
	}
	,getTodayData:function() {
		return {
			y:this.today.getFullYear()
			,m:this.today.getMonth() + 1
			,d:this.today.getDate()
		}
	}
	,initMonthDays:function() {
		var that = this;
		var year = this.year;
		var month = this.month;
		var beforeMonth = month-1;
		var beforeYear = year;
		if(beforeMonth &lt; 1) {
			beforeMonth = 12;
			beforeYear--;
		}
		// 当月天数
		var daysInMonth = VUI.Date.getEndDate(year,month);
		var daysInPreMonth = VUI.Date.getEndDate(year,beforeMonth);
		// 每月1号
		var firstDayOfMonth = new Date(beforeYear,beforeMonth,1);
		// 每月1号星期几
		var firstDay = firstDayOfMonth.getUTCDay();
		// 日期
		var dayIndex = 1;
		// 日期行的索引
		var rowIndex = 0;
		this.monthDays = [];
		
		var thirdRow = {weekDays:[]};
		
		// 填充空白天数
		for(var i=firstDay;i&gt;=0;i--){
			var day = daysInPreMonth - i;
			var style = {color:'gray'};
			
			this.appendDays(thirdRow,year,beforeMonth,day,style);
		}
		// 填充第一个星期
		for (var i=firstDay + 1;i&lt;=6;i++){
			var day = dayIndex++;
			this.appendDays(thirdRow,year,month,day);
		}
		this.monthDays.push(thirdRow);
		// 填充剩下的天数
		while (dayIndex &lt;= daysInMonth) {
			
			var row = {weekDays:[]};
			for (var i=0;i&lt;=6 &amp;&amp; dayIndex &lt;= daysInMonth;i++){
				var day = dayIndex++;
				this.appendDays(row,year,month,day);
			}
			this.monthDays.push(row);
		}
		
	}
	,appendDays:function(row,y,m,d,style) {
		
		var dayData = {y:y,m:m,d:d};
		if(dayData) {
			dayData.style = style;
		}
		row.weekDays.push(dayData);
	}
	//@override
	,getTemplate:function(){
		var template = 
		'&lt;div style=&quot;display: block;&quot; class=&quot;ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-shadow&quot;&gt;' +
			'&lt;div class=&quot;ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all&quot;&gt;' + 
				'&lt;a class=&quot;ui-datepicker-prev ui-corner-all&quot;&gt;&lt;span @click=&quot;cmp.view.preMonth()&quot; class=&quot;ui-icon ui-icon-circle-triangle-w&quot;&gt;&lt;/span&gt;&lt;/a&gt;'+
				'&lt;a class=&quot;ui-datepicker-next ui-corner-all&quot;&gt;&lt;span @click=&quot;cmp.view.nextMonth()&quot; class=&quot;ui-icon ui-icon-circle-triangle-e&quot;&gt;&lt;/span&gt;&lt;/a&gt;' + 
				'&lt;div class=&quot;ui-datepicker-title&quot;&gt;' +
					'&lt;select @change=&quot;cmp.view.ngChangeYear()&quot; v-model=&quot;cmp.view.year&quot;&gt;' +
						'&lt;option v-for=&quot;year in cmp.view.getYears()&quot; :value=&quot;year&quot;&gt;' +
						    '{{ year }}' +
						'&lt;/option&gt;' +
					'&lt;/select&gt;' +
					'&amp;nbsp;&lt;select @change=&quot;cmp.view.vChangeMonth()&quot; v-model=&quot;cmp.view.month&quot;&gt;' +
						'&lt;option v-for=&quot;month in cmp.view.months&quot; :value=&quot;month&quot;&gt;' +
						    '{{ month }}' +
						'&lt;/option&gt;' +
					'&lt;/select&gt;' +
				'&lt;/div&gt;' + 
			'&lt;/div&gt;' + 
			'&lt;table class=&quot;ui-datepicker-calendar&quot;&gt;' + 
				'&lt;thead&gt;' +
					'&lt;tr&gt;' + 
						'&lt;th v-for=&quot;txt in cmp.view.weekTextItems&quot;&gt;&lt;span&gt;{{ txt }}&lt;/span&gt;&lt;/th&gt;' + 
					'&lt;/tr&gt;' + 
				'&lt;/thead&gt;' + 
					'&lt;tbody&gt;' + 
						'&lt;tr v-for=&quot;row in cmp.view.monthDays&quot;&gt;' +
							'&lt;td v-for=&quot;dayData in row.weekDays&quot; ' +
								':class=&quot;cmp.view.isSelected(dayData) ? \'ui-datepicker-current-day\' : \'\'&quot; ' + 
								'data-year=&quot;dayData.y&quot; data-month=&quot;dayData.m&quot; data-day=&quot;dayData.d&quot;&gt;' +
								
								'&lt;span :class=&quot;cmp.view.isSelected(dayData) ? \'ui-state-default ui-state-highlight ui-state-active \' : \'\'&quot; ' +
									'class=&quot;vui-hover ui-state-default&quot; ' +
									':style=&quot;dayData.style&quot; ' +
									'style=&quot;text-align:center;cursor:pointer;&quot; ' +
									'@click=&quot;cmp.view.vClick(dayData)&quot;&gt;{{dayData.d}}&lt;/span&gt;' +
								
							'&lt;/td&gt;' + 
						'&lt;/tr&gt;' +
					'&lt;/tbody&gt;' + 
			'&lt;/table&gt;' + 
			'&lt;div v-show=&quot;cmp.view.showFoot&quot; class=&quot;ui-datepicker-header&quot; style=&quot;text-align: center;&quot;&gt;' +
				'&lt;button @click=&quot;cmp.view.vClickToday()&quot; class=&quot;pui-button ui-widget ui-state-default ui-corner-all pui-button-text-only&quot; value=&quot;&quot;&gt;&lt;span class=&quot;pui-button-text&quot;&gt;今天&lt;/span&gt;&lt;/button&gt;' +
				'&lt;button @click=&quot;cmp.view.vClickCancel()&quot; class=&quot;pui-button ui-widget ui-state-default ui-corner-all pui-button-text-only &quot; value=&quot;&quot;&gt;&lt;span class=&quot;pui-button-text&quot;&gt;清空&lt;/span&gt;&lt;/button&gt;' +
			'&lt;/div&gt;' + 
		'&lt;/div&gt;';
		return template;
	}
},VUI.View);

})();</pre>
</body>
</html>
